<template>
  <div class="app-container">
    <div class="filter-container">
      <span v-if="authorityHandle(129)" class="filter-title filter-item">身份所属</span>
      <k-select
        v-if="authorityHandle(129)"
        v-model="listQuery.userType"
        class="filter-item right-item"
        style="width:120px"
        :select-params="dict.type.IDENTITY_TYPE"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">礼品分类</span>
      <k-select
        v-model="listQuery.typeId"
        class="filter-item right-item"
        style="width:120px"
        :custom-params="{opations:prizeTypeList, label:'lineName',value:'lineId'}"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">礼品状态</span>
      <k-select
        v-model="listQuery.prizeStatus"
        class="filter-item right-item"
        style="width:120px"
        :custom-params="{opations:prizeStatusList, label:'lineName',value:'lineId'}"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">获得时间</span>
      <k-date-picker v-model="timeValue" class="filter-item" @hqchang="handleFilter" />
      <span class="filter-title filter-item">操作时间</span>
      <k-date-picker v-model="operationVTime" class="filter-item" @hqchang="handleFilter" />
      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="进行搜索"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>
    <div class="top-right-btn-container">
      <k-button v-if="authorityHandle(128)" class="top-btn" value="礼品作废" @click.native="babyValidate" />
    </div>
    <!--表格相关 -->
    <el-table
      ref="multipleTable"
      :data="listData"
      fit
      border
      :show-summary="authorityHandle(264)"
      :summary-method="getSummaries"
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 20px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
    >
      <el-table-column v-if="authorityHandle(128)" min-width="60px" type="selection" align="center" />
      <el-table-column prop="userName" min-width="100px" label="用户账号" show-overflow-tooltip />
      <el-table-column prop="userTypeName" min-width="100px" label="身份所属" show-overflow-tooltip />
      <el-table-column prop="prizeName" min-width="150px" label="礼品名称" show-overflow-tooltip />
      <el-table-column prop="prizePrice" min-width="100px" label="礼品价值" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="typeName" min-width="100px" label="礼品分类" show-overflow-tooltip />
      <el-table-column prop="statusName" min-width="100px" label="礼品状态" show-overflow-tooltip />
      <el-table-column prop="operationTime" min-width="120px" label="操作时间" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="createTime" min-width="120px" label="获得时间" sortable="custom" show-overflow-tooltip />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
  </div>
</template>

<script>
import { listPrizeUserData, getPrizeStatusList, abolishPrize, getPrizeTypeList, taskLogSumPrice } from '@/api/task/index'

import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  dicts: ['IDENTITY_TYPE'],
  data() {
    return {
      addBaby: false,
      listData: [],
      prizeStatusList: [],
      prizeTypeList: [],
      multipleSelection: [],
      timeValue: '',
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        userType: undefined, // 用户类型",
        typeId: undefined, // 饰品来源",
        prizeStatus: undefined, // 箱子id",
        startTime: '', // 开始时间",
        endTime: '', // 结束时间",
        key: '', // 饰品名称'
        operationStartTime: '',
        operationEndTime: ''
      },
      operationVTime: '',
      // 积分总计
      prizePrice_price: ''

    }
  },
  watch: { // 时间赋值
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    },
    operationVTime(val) {
      this.listQuery.operationStartTime = this.operationVTime ? this.operationVTime[0] : null
      this.listQuery.operationEndTime = this.operationVTime ? this.operationVTime[1] : null
    }
  },
  created() {
    this.loadData()
    this.getPrizeTypeList()
    this.getPrizeStatusList()
  },

  methods: {
    getPrizeTypeList() {
      getPrizeTypeList().then(res => {
        this.prizeTypeList = res.data
      })
    },
    getPrizeStatusList() {
      getPrizeStatusList().then(res => {
        this.prizeStatusList = res.data
      })
    },
    loadData() {
      listPrizeUserData(this.listQuery).then(res => {
        const data = res.data
        this.listData = data.rows
        this.totalRows = data.totalRows
        this.tableDate()
      })
    },
    tableDate() {
      if (!this.authorityHandle(264)) return
      this.$nextTick(() => {
        const html5 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[4]
          .querySelector('.cell')
        html5.innerHTML = `${this.prizePrice_price !== '' ? this.prizePrice_price : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html5.onclick = () => {
          taskLogSumPrice({ ...this.listQuery }).then(res => {
            this.prizePrice_price = res.data
            this.tableDate()
          })
        }
      })
    },
    getSummaries(param) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        console.log(column)

        if (index === 0) sums[index] = '总计'
        else if (index != 4) {
          sums[index] = ''
        }
      })
      return sums
    },
    // 选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 表格的排序条件发生变化的时候会触发该事件
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop
      if (column.order === 'ascending') {
        this.listQuery.direction = 'asc'
      } else if (column.order === 'descending') {
        this.listQuery.direction = 'desc'
      }
      this.loadData()
    },

    // 饰品作废
    babyValidate() {
      const _vue = this
      if (_vue.multipleSelection.length < 1) {
        this.$message.error('请至少选择一条数据进行作废！')
        return
      }
      const selections = _vue.multipleSelection
      this.$confirm('确定作废选中的饰品么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var ids = []
        for (var i = 0; i < selections.length; i++) {
          ids.push(selections[i].id)
        }
        abolishPrize({ ids: ids }).then(res => {
          this.$message.success('作废成功')
          this.handleFilter()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    }
  }
}
</script>
<style lang="scss" scoped>
$menuText:#14162E; // 侧边栏字体颜色
$hoverColor:#1D143C;// 鼠标停留主色调浅色
$mainColor:#3b425d;// 主色调
.filter-container {
 width: 100%;
  height: 48px;
  line-height: 48px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .kInput{
    position:absolute;
    right: 20px;
  }
  .filter-title{
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }
  .right-item{
    margin-right: 10px;
  }
}
.top-right-btn-container{
  position: relative;
  .top-btn {
      margin: 30px 20px 30px 0px;
      font-size: 14px;
      color: #ffffff;
  }
  .top-right-btn{
    position: absolute;
    right: 20px;
    top: 30px;
    background-color: #F8F7FB;
    border-color: $mainColor;
    color: #14162E;
    &:hover{
      color: #ffffff;
      background-color: $mainColor;
    }
    &:active{
      color: #14162E;
    }

  }
  .top-right-btn-left{
    position: absolute;
    right: 140px;
    top: 30px;
    background-color: #F8F7FB;
    border-color: $mainColor;
    color: #14162E;
    &:hover{
      color: #ffffff;
      background-color: $mainColor;
    }
    &:active{
      color: #14162E;
    }

  }
}
.el-message-box{
  .el-button{
    border: 1px solid #3b425d;
    color: #3b425d;
    background-color: rgba($color: #3b425d, $alpha: .1);
  }
}
.form_content{
    margin-bottom: 50px;
}
.addBox_dialog{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  ::v-deep .el-dialog__body{
    width: 678px;
    margin: 40px 80px;
  }
  ::v-deep .el-select .el-select__tags>span {
			display: none;
	}
  .el-tag + .el-tag {
    margin-left: 10px;
  }
   .el-tag {
    color: $mainColor;
    background-color: #ffffff;
    border-color: $mainColor;
    ::v-deep .el-tag__close {
      color: $mainColor;
    }
    ::v-deep .el-icon-close:hover {
      color:#ffffff;
      background: $mainColor;
    }
  }
}
</style>
